<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/index.css"/>
    <link rel="stylesheet" type="text/css" href="css/node_modules/bootstrap/dist/css/bootstrap.css"/>
</head>

<body>
<div id="web_bg">
    <!--S header-->
    <header class="headers">
        <div class="wrap">
            <div class="header-logo float">
                <i></i>
                <img class="img-responsive" src="img/LOGO.png"/>
            </div>

            <div class="header-title">
                <div class="title-chinese">电 池 生 产 制 造 看 板</div>
                <div class="title-english">Production and Manufacturing Platfrom-PV</div>
            </div>

            <div class="header-date float">
                <dl>
                    <dd class="date" id="time"></dd>
                </dl>
            </div>
        </div>
    </header>
    <!--E header-->
    <div class="container-fluid" id="app">
        <!--S 稼动率 仪表盘 碳排量-->
        <div class="row clearfix cl-vh">
            <div class="col-md-3 column">
                <div class="col-3">
                    <div class="container_title">
                        设备稼动率/Equipment Crop Rate

                    </div>
                    <div class="row clearfix item_char">
                        <div class="col-md-12 column" id="oee"  style="height: 80%;width: 100%;padding-top:10%;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 column">
                <div class="col-6">
                    <div class="container_title">
                        仪表盘/Instrument board
                    </div>
                    <div class="row clearfix item_char">
                        <div class="col-md-3 column instrument" id="gauge1">
                        </div>
                        <div class="col-md-3 column instrument" id="gauge2">
                        </div>
                        <div class="col-md-3 column instrument" id="gauge3">
                        </div>
                        <div class="col-md-3 column" style="height: 100%" id="gauge4">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 column">
                <div class="col-3">
                    <div class="container_title">
                        减少碳排量/Reduction of carbon emissions
                    </div>
                    <ul class="item_char">
                        <li>
                            <div>
                                <img src="img/battery/小树ICON.png" class="item_img">
                            </div>
                            <div class="item_carbon">等效种植树木142,573,448棵</div>
                        </li>
                        <li>
                            <div>
                                <img src="img/battery/煤矿ICON.png" class="item_img">
                            </div>
                            <div class="item_carbon">等效种植树木142,573,448棵</div>
                        </li>
                        <li>
                            <div>
                                <img src="img/battery/二氧化碳ICON.png" class="item_img">
                            </div>
                            <div class="item_carbon">等效种植树木142,573,448棵</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--E 稼动率 仪表盘 碳排量-->
        <!--S 质量 产量 预警-->

        <div class="row clearfix cl-vh">
            <div class="col-md-3 column">
                <div class="col-3">
                    <div class="container_title">
                        质量控制/Quality control(QC)
                    </div>
                    <div class="row clearfix item_char">
                        <div class="col-md-12 column" id="qc"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 column">
                <div class="col-6">
                    <div class="container_title">
                        当日产量/Today's production
                    </div>
                    <div class="row clearfix item_char">
                        <div class="col-md-12 column" id="production"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 column">
                <div class="col-3">
                    <div class="container_title">
                        预警信息/Early warning infomarion
                    </div>
                    <div class="row clearfix item_char">
                        <table style="color: #ce4041; text-align: center;">
                            <thead>
                            <tr>
                                <th>时间段</th>
                                <th>工序</th>
                                <th>预警信息</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td width="80">05:30~07:30</td>
                                <td width="80">SDE</td>
                                <td width="110">达成率预警</td>
                            </tr>
                            <tr>
                                <td width="80">05:30~07:30</td>
                                <td width="80">SDE</td>
                                <td width="110">达成率预警</td>
                            </tr>
                            <tr>
                                <td width="80">05:30~07:30</td>
                                <td width="80">SDE</td>
                                <td width="110">达成率预警</td>
                            </tr>
                            <tr>
                                <td width="80">05:30~07:30</td>
                                <td width="80">SDE</td>
                                <td width="110">达成率预警</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!--E 质量 产量 预警-->
        <!--S CPK 电池效率-->
        <div class="row clearfix">
            <div class="col-md-6 column">
                <div class="col-6">
                    <div class="container_title">
                        CPK
                    </div>
                    <div class="row clearfix item_char">
                        <div class="col-md-12 column" id="cpk" style="height: 65%;width: 100%"></div>
                        <div style="height: 35%;left: 5%;right: 5%" class="col-md-11">
                            <div class="board data_title">数据<br/>统计
                            </div>
                            <div style="float: left;height: 3.076vw;left: 100px">
                                <table width="100%" class="board">
                                    <thead>
                                    <tr>
                                        <th>数据个数</th>
                                        <th>最大值</th>
                                        <th>最小值</th>
                                        <th>平局值</th>
                                        <th>标准偏差</th>
                                        <th>CPK</th>
                                        <th>基本点</th>
                                        <th>直方柱数</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <td>7920</td>
                                    <td>0.2</td>
                                    <td>-0.198</td>
                                    <td>0.034</td>
                                    <td>0.0424201</td>
                                    <td>1.30441</td>
                                    <td>OFP1001100</td>
                                    <td>21</td>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 column">
                <div class="col-6">
                    <div class="container_title">
                        电池片效率/ETA
                    </div>
                    <div class="row clearfix item_char">
                        <div class="col-md-12 column" id="eta" style="height: 100%;width: 100%"></div>
                    </div>
                </div>
            </div>
            <!--E CPK 电池效率-->
        </div>
    </div>
</div>
<script src="js/node_modules/jquery/dist/jquery.js"></script>
<script src="js/node_modules/vue/dist/vue.js"></script>
<script src="js/node_modules/echarts/dist/echarts.js"></script>
<script src="js/base.js"></script>
<script src="js/app.js"></script>
<script type="application/javascript">
</script>
</body>

</html>
